<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <script src="../js/vue.js"></script>
</head>
<body @keyup.enter="aaa">
    <!-- 
        键盘事件
            1：@keyup or @keydown
            2：@keyup.enter  按enter触发事件
            常用按钮别名
            enter 回车
            delete (删除 和 退格 键)
            esc 退出
            space 空格
            tab  tab键 有切换功能 键盘输入时input失去焦点 不会触发 要用keydown
            up  上
            down 下
            left 左
            right 右
            系统修饰键
            ctrl alt shift meta 配合@keyup 不会触发事件，需换成keydown 或者按下系统键不放 在按下其他键松开会触发事件
            ctrl.y 表明的意思时ctrl+y键触发函数
     -->
    <div id="root">
        输入：<input type="text" name="" id="" @keyup.enter="show">
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            
        },
        methods:{
            show(e){
                console.log(e.key,e.key.code)
                console.log(e.target.value)
            },
            aaa(){
                console.log(11221)
            }
        }
    })
    document.onkeyup = function(e){
        console.log(e);
    }
</script>
</html>